<%@page contentType="text/html" pageEncoding="UTF-8"%>
<div id="top">
    
    <div id="search">
        <form onsubmit="return serializeForm(this)">
            <input type="hidden" name="command" value="search"/>
            <input type="text" id="autocomplete" name="postData"/>
            <div id="autocomplete_choices" class="autocomplete"></div>
            <input type="submit" value="Buscar"/>
        </form>
        
        <span class="link" onclick="showElement('advanced')">Búsqueda avanzada</span> 
        <div id="advanced" style="display:none">
            <form onsubmit="return serializeForm(this)">
                <input type="hidden" name="command" value="advancedSearch"/>
                <h4>Duración [días]</h4>
                <p>Desde <input name="from" type="text" size="10"/></p>
                <p>Hasta <input name="to" type="text" size="10"/></p>
                <p>
                    <input type="submit" value="Buscar"/>
                    <span class="link red" onclick="cancelElement('advanced')">Cancelar</span>
                </p>
            </form>
        </div>    
    </div>
    
    <h2>Mantenimientos</h2>
    
</div><!--/top-->

<div id="middle">
    
    <div>
        <span class="link big" onclick="showElement('create')">Agregar</span>
        <span class="link" onclick="showElement('upload')">Subir muchos de un archivo</span>
    </div>
    
    <div id="create" style="display:none">
        <form onsubmit="return serializeForm(this)">
            <input type="hidden" name="command" value="create"/>
            <table class="clean-table">
                <tr><th>Descripción</th><td><input name="description" type="text"/></td></tr>
                <tr><th>Duración</th><td><input name="duration" type="text"/></td></tr>
                <tr>
                    <th></th>
                    <td>
                        <input type="submit" value="Guardar"/>
                        <span class="link red" onclick="cancelElement('create')">Cancelar</span>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    
    <iframe id="upload" src="about:blank" style="display:none"></iframe>
    
</div><!--/middle-->

<div id="bottom">
    
    <table border="1" width="100%">
        <thead>
            <tr>
                <th class="left" colspan="2">
                    <label>Ver:</label>
                    <select id="filter" onchange="changeFilter(this)">
                        <option value="all" selected="selected">Todos</option>
                        <option value="search">Buscados</option>
                    </select>
                </th>
                <th class="right">
                    <label>Ordenar:</label>
                    <select onchange="changeOrder(this)">
                        <option value="description" selected="selected">Descripción</option>
                        <option value="duration">Duración</option>
                    </select>
                </th>
            </tr>
        </thead>
        <tbody id="manager">
        </tbody>
    </table>
    
</div><!--/bottom-->

<script type="text/javascript">
    controller = 'Maintenances';
    filter = "all";
    order = "description";
    search = null;
    loadAutocompleter();
    loadItems();
</script>

